<template>
	<div class="income-submit-confirm" v-show="false" v-if="rowData">
		<p class="title">工资核算信息确认</p>
		<ul class="submit-table">
			<li class="submit-table-item">
				<div class="submit-table-cont">
					<span class="submit-table-left">工资核算开始日期</span>
					<span class="submit-table-right">{{confirmData.startTime}}</span>
				</div>
			</li>
			<li class="submit-table-item">
				<div class="submit-table-cont">
					<span class="submit-table-left">工资核算截止日期</span>
					<span class="submit-table-right">{{confirmData.endTime}}</span>
				</div>
			</li>
			<li class="submit-table-item">
				<div class="submit-table-cont">
					<span class="submit-table-left">普通员工数量</span>
					<span class="submit-table-right">{{confirmData.employeeNum}}</span>
				</div>
			</li>
			<li class="submit-table-item">
				<div class="submit-table-cont">
					<span class="submit-table-left">教练员工数量</span>
					<span class="submit-table-right">{{confirmData.teacherNum}}</span>
				</div>
			</li>
			<li class="submit-table-item">
				<div class="submit-table-cont">
					<span class="submit-table-left">工资发总额</span>
					<span class="submit-table-right">{{confirmData.wagesTotal}}</span>
				</div>
			</li>
		</ul>
		<el-col :span="24" style="margin-top:14px" class="btn-group">
			<el-button type="danger" round class="add-btn" @click="submit">提 交</el-button>
			<el-button type="danger" round class="select-btn" @click="close">取 消</el-button>
		</el-col>
	</div>
</template>

<script>
	import Compute from "@/assets/compute.holdtime";
	export default {
		name: "",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			rowData: {
				type: Array
			},
			selectDate: {
				type: Object
			}
		},
		data() {
			return {
				visible: this.value,
				layIndex: null
			};
		},
		computed: {
			confirmData() {
				let employeeNum = 0,
					teacherNum = 0,
					wagesTotal = 0;

				this.rowData.forEach(e => {
					wagesTotal = Compute.plus(wagesTotal, e.wagesTotal);
					e.employeeType == '1' ? employeeNum++ : teacherNum++;
				});

				return {
					startTime: this.selectDate.startDate,
					endTime: this.selectDate.endDate,
					employeeNum: employeeNum,
					teacherNum: teacherNum,
					wagesTotal: wagesTotal
				};
			}
		},
		methods: {
			submit() {
				this.$http.post('wages/submitEmployyeeWages', {
					data: this.rowData
				}, d => {
					if(d.status == '1') {
						layer.msg(d.msg, {
							time: 1000,
							shade: 0.3
						}, function() {
							location.reload();
						});
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			},
			close() {
				this.visible = false;
				this.$emit('input', false);
			}
		},
		watch: {
			value(val) {
				this.visible = val;
			},
			visible(val) {
				if(val === false) {
					layer.close(this.layIndex);
				} else {
					this.$nextTick(() => {
						let that = this;
						this.layIndex = layer.open({
							type: 1,
							shadeClose: true,
							title: "",
							skin: "layui-layer-rim", //加上边框
							area: ["60%", "500px"], //宽高
							content: $(this.$el),
							end: function() {
								that.close();
							}
						});
					});
				}
			}
		}
	};
</script>

<style scoped>
	.add-btn {
		height: 40px;
		padding: 0 33px;
		float: right;
		background: url("/static/img/nav-bg.png");
		background-size: 100% 100%;
		border: 0;
	}
	
	.select-btn {
		height: 40px;
		padding: 0 33px;
		margin-right: 20px;
		float: right;
		background: url("/static/img/hui-btnBG.png");
		background-size: 100% 100%;
		border: 0;
		color: #000;
	}
	
	.totalNum {
		color: #ff3333;
	}
	
	.title {
		width: 100%;
		float: left;
		padding: 18px 0;
		color: #575757;
		font-size: 22px;
	}
	
	.submit-table {
		width: 100%;
		float: left;
		border: 1px solid #d9d9d9;
		background: #f1f1f1;
		border-radius: 3px;
	}
	
	.submit-table-item {
		width: 50%;
		float: left;
		padding: 18px 0;
		border-bottom: 1px solid #d9d9d9;
	}
	
	.submit-table-item:last-child {
		border: 0;
	}
	
	.submit-table-cont {
		width: 100%;
		float: left;
	}
	
	.submit-table-left {
		width: 35%;
		float: left;
		text-align: right;
		padding-right: 5%;
		color: #9d9d9d;
	}
	
	.submit-table-right {
		width: 60%;
		float: left;
		color: #575757;
	}
</style>